<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Weapons #3</title>
  <script type="text/javascript" src="http://www.google.com/jsapi">
  </script>
  <script type="text/javascript" src="http://resource-calculators.googlecode.com/hg/ffxiii/weapons03.js">
  </script>
  <script type="text/javascript" src="http://resource-calculators.googlecode.com/hg/ffxiii/weap03.js">
  </script>

<script type="text/javascript">
var characterWeapChart = [];
var weaponchart;
var datatable;

google.load('visualization', '1', {packages:['orgchart', 'table']});
google.setOnLoadCallback(loadAll);


function loadAll() {
	datatable = new google.visualization.DataTable();
	
	weaponchart = new google.visualization.OrgChart(document.getElementById('chart'));
	google.visualization.events.addListener(weaponchart, 'select', weaponSelect);	
	
	characterWeapChart["Lightning"] = lightningDataTable();
	characterWeapChart["Sazh"] = sazhDataTable();
	characterWeapChart["Snow"] = snowDataTable();
	characterWeapChart["Hope"] = hopeDataTable();
	characterWeapChart["Vanelle"] = vanelleDataTable();
	characterWeapChart["Fang"] = fangDataTable();
	//google.visualization.events.addListener(weaponchart, 'select', weaponSelect);
}



</script>

<style type="text/css">
  div.updateCurrent {border-style:dotted;}
</style>

</head>
<body>
  <div>
    <!-- <form action="#" > -->
    Character: 
    <select id="select_character" onChange="selChar()">
      <option>select a character</option>
      <option>Lightning</option>
      <option>Sazh</option>
      <option>Snow</option>
      <option>Hope</option>
      <option>Vanelle</option>
      <option>Fang</option>
    </select>
    <br />
    <div id="updateCurrent">
    Set current Lv: <span id='setCurrLvMin'>1</span>: <input id="setCurrLv" type="range" min="1" max="10" step="1" value="1" 
    onchange="document.getElementById('setCurrLvValue').innerHTML = document.getElementById('setCurrLv').value;" />
     <span id='setCurrLvMax'>10</span> => <span id="setCurrLvValue">1</span>
             and current EXP <input id="setCurrExp" type="number" value="0" />
      <div>target Lv: <span id='setTargetLvMin'>2</span>: <input id="setTargetLv" type="range" min="2" max="100" step="1" value="100"
      onchange="document.getElementById('setTargetLvValue').innerHTML = document.getElementById('setTargetLv').value;" />
      * => <span id='setTargetLvValue'>11</span></div>
      <!-- <input type="submit" value="update current" />  -->
    <!-- </form> -->
      <button onclick="updateCurrentForWeapon();">update current</button>
    </div>
    <br />

    Who: <span id='who'></span>
    <br />
    Weapon: <span id='weap'></span>
    <br />
    Lv: <span id='lv'></span> Strength: <span id='str'></span> Magic: <span id='magic'></span> current experience: <span id='exp'></span>
    <br />
    <br />
    Target Lv: <span id='target_lv'>*</span> Strength: <span id='target_str'></span> Magic: <span id='target_magic'></span>
    <br />
    needed EXP: <span id='needed_exp'></span>

  </div>
  <!-- 
  <button onclick="document.getElementById('debug1').innerHTML=document.getElementById('setCurrLv').value;">debug</button><span id="debug1"></span>
  <button onclick="document.getElementById('debug2').innerHTML=document.getElementById('setTargetLv').value;">debug</button><span id="debug2"></span>
   -->
  <div id='chart'></div>

</body>
</htmls>